<template>
	<div class="commonPlayFooter flex" :class="show ? 'show' : ''">
		<div class="left flex">
			<img src="https://api.sora13.com/images/aisora-w/114711/20240614/18812447_0.jpg" class="cover" />
			<div class="info">
				<div class="h3 ell">送给羊水之歌</div>
				<div class="desc ell">@小萌牛</div>
			</div>
		</div>
		<div class="center flex">
			<div class="operDiv flex">
				<div class="item iconfont icon-shunxu" v-if="true" style="font-size: 22px;color: rgba(255,255,255,0.65);" @click="$notify({ title: '成功', message: '切换播放顺序', type: 'success' });"></div>
				<div class="item iconfont icon-suijibofang" v-else-if="true" style="font-size: 21px;color: rgba(255,255,255,0.65);"></div>
				<div class="item iconfont icon-danquxunhuan" v-else style="font-size: 22px;color: rgba(255,255,255,0.65);"></div>
				
				<div class="item iconfont icon-shangyishou" style="font-size: 18px;color: rgba(255,255,255,0.86);transform: rotate(180deg);"></div>
				<div class="item iconfont icon-pause-full" style="font-size: 26px;color: rgba(255,255,255,0.86);" v-if="true"></div>
				<div class="item iconfont icon-bofang2" style="font-size: 30px;color: rgba(255,255,255,0.86);" v-else></div>
				<div class="item iconfont icon-shangyishou" style="font-size: 18px;color: rgba(255,255,255,0.86);"></div>
				
				<div class="item iconfont icon-bofangliebiaoguanli" style="font-size: 18px;color: rgba(255,255,255,0.65);" @click="$refs.playList.open()"></div>
			</div>
			<div class="progressDiv flex">
				<span class="text">00:02</span>
				<el-slider class="elSlider" :value="2" :min="0" :max="100" :show-tooltip="false"></el-slider>
				<span class="text">03:10</span>
			</div>
		</div>
		<div class="right flex">
			<div class="item flex" @click="$notify({ title: '成功', message: '给你妈点一赞', type: 'success' });">
				<span class="iconfont icon-aixin" style="font-size: 24px;" v-if="false"></span>
				<span class="iconfont icon-aixin" style="font-size: 24px;color: #F30;" v-else></span>
			</div>
			<div class="item flex" @click="$notify({ title: '成功', message: '复制分享链接成功', type: 'success' });">
				<span class="iconfont icon-fenxiang" style="font-size: 25px;"></span>
			</div>
			<div class="item flex" @click="$notify({ title: '成功', message: '下载出来', type: 'success' });">
				<span class="iconfont icon-xiazai5" style="font-size: 21px;"></span>
			</div>
			<div class="item flex" style="flex: 1;width: 0;">
				<span class="iconfont icon-yinliang" style="font-size: 26px;"></span>
				<el-slider class="elSlider" :value="30" :min="0" :max="100" :show-tooltip="false"></el-slider>
			</div>
		</div>
		<playList ref="playList" />
		<div class="iconfont icon-shousuoxiala upBtn" @click="show = false"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				// 显示隐藏
				show: false,
				
			}
		},
		mounted(){
			setTimeout(() => {
				this.show = true;
			}, 200);
		}
	}
</script>

<style scoped lang="scss">
	.commonPlayFooter{
		background: #181b21;
		height: 0;
		transition: 0.2s all;
		flex-direction: row;
		align-items: center;
		padding: 0 15px;
		position: relative;
		overflow: hidden;
		&.show{
			overflow: inherit;
			height: 90px;
			border-top: 1px solid #212832;
			.upBtn{
				opacity: 1;
			}
		}
		.left{
			width: 33%;
			max-width: 350px;
			flex-direction: row;
			align-items: center;
			.cover{
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}
			.info{
				margin-left: 15px;
				.h3{
					transition: 0.2s all;
					cursor: pointer;
					font-size: 16px;
					font-weight: bold;
					color: #FFF;
					line-height: 1.2;
					text-decoration: overline;
					&:hover{
						opacity: 0.8;
						text-decoration: underline;
					}
				}
				.desc{
					transition: 0.2s all;
					cursor: pointer;
					font-size: 14px;
					color: rgba(255,255,255,0.65);
					line-height: 1.2;
					margin-top: 6px;
					&:hover{
						opacity: 0.8;
						text-decoration: underline;
					}
				}
			}
		}
		.center{
			flex: 1;
			width: 0;
			margin: 0 30px;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-top: 10px;
			overflow: hidden;
			.operDiv{
				width: 100%;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.item{
					margin-right: 36px;
					color: rgba(255,255,255,0.86);
					transition: 0.2s all;
					cursor: pointer;
					&:nth-last-child(1){
						margin-right: 0;
					}
					&:hover{
						opacity: 0.8;
					}
				}
			}
			.progressDiv{
				margin-top: 2px;
				max-width: 700px;
				width: 100%;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.text{
					color: rgba(255,255,255,0.86);
					font-size: 14px;
					font-weight: bold;
				}
				.elSlider{
					margin: 0 12px;
					width: 0;
					flex: 1;
				}
			}
		}
		.right{
			width: 33%;
			max-width: 350px;
			flex-direction: row;
			align-items: center;
			.item{
				flex-direction: row;
				align-items: center;
				transition: 0.2s all;
				cursor: pointer;
				margin-left: 30px;
				&:nth-child(1){
					margin-left: 0;
				}
				&:hover{
					opacity: 0.8;
				}
				.iconfont{
					color: rgba(255,255,255,0.86);
				}
				.elSlider{
					flex: 1;
					width: 0;
					margin-left: 12px;
				}
			}
		}
		.upBtn{
			opacity: 0;
			position: absolute;
			top: -24px;
			right: 0;
			z-index: 2;
			color: #FFF;
			background: #181b21;
			font-size: 20px;
			border: 1px solid #212832;
			border-bottom: 0;
			line-height: 23px;
			width: 36px;
			text-align: center;
			border-radius: 5px 5px 0 0;
			cursor: pointer;
			transition: 0.2s all;
			&:hover{
				opacity: 0.8;
			}
		}
	}
	@media screen and (max-width: 1000px) {
		.commonPlayFooter .left, .commonPlayFooter .right{
			display: none;
		}
	}
</style>